<template>
	<GlobalPanel v-if="globalPanel" />
	<view :class="showBorder ? 'nav-header' : ''">
		<up-navbar :auto-back="false" title-width="200" placeholder rightIcon="more-dot-fill" :bgColor="bgColor"
			:fixed="fixed" :titleStyle="{ color: titleColor }">
			<template v-slot:left>
				<view class="left">
					<slot name="left">
						{{title}}
					</slot>
				</view>
			</template>
			<template v-slot:right>
				<slot name="right">
					<svg-icon :icon="rightIcon" v-if="showRight" class="menu"
						@tap.stop.native="onShowMore()"></svg-icon>
					<view v-else></view>
				</slot>
			</template>
		</up-navbar>
	</view>
</template>

<script>
	import GlobalPanel from '../global-panel/global-panel.vue'
	export default {
		components: {
			GlobalPanel
		},
		props: {
			/**
			 * 去除微信小程序自带导航栏后要不要生成一个90rpx的定格
			 */
			customNav: {
				type: Boolean,
				default: false
			},
			globalPanel: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: ""
			},
			showTitle: {
				type: Boolean,
				default: true
			},
			showLeft: {
				type: Boolean,
				default: true
			},
			showRight: {
				type: Boolean,
				default: true
			},
			/**
			 * 固定顶部并生成一个等高的盒子
			 */
			fixed: {
				type: Boolean,
				default: true
			},
			rightIcon: {
				type: String,
				default: "menu"
			},
			leftIconColor: {
				type: String,
				default: "#000000" //#1989FA
			},
			bgColor: {
				type: String,
				default: '#ffffff'
			},
			titleColor: {
				type: String,
				default: ''
			},
			showBorder: {
				type: Boolean,
				default: true
			}
		},
		emits: ["onShowMore", "onNavBack"],
		data() {
			return {
				customNavHeight: 0,
			}
		},
		mounted() {
			// #ifdef MP-WEIXIN
			this.customNavHeight = uni.getMenuButtonBoundingClientRect().height
			// #endif
		},
		methods: {
			onNavBack() {
				// #ifndef H5
				uni.navigateBack({
					delta: 1,
				})
				// #endif
				// #ifdef H5
				history.back()
				// #endif
				this.$emit("onNavBack")
			},
			onShowMore() {
				this.$emit("onShowMore")
			},
		}
	}
</script>

<style lang="scss">
	.nav-header {
		:deep(.u-navbar__content) {
			background: linear-gradient(90deg, rgba(211, 234, 237, 1) 0%, rgba(224, 236, 245, 1) 39%, rgba(236, 238, 251, 1) 100%);
		}

		.left {
			font-size: 40rpx;
			font-weight: bold;
		}
	}
</style>